<template>
	<public-view topBgShow="0" navType="login">
		<view class="content flex f-d-c a-i-c">
			<image class="login-logo" src="@/static/login/logo.svg" mode=""></image>
			<view class="input-view flex a-i-c">
				<image class="phone-icon" src="@/static/login/phone-icon.svg" mode=""></image>
				<input type="number" class="input-phone f-s-32 color-333 f-w-b" v-model="phone" placeholder="请输入手机号"/>
			</view>
			<view class="input-view flex a-i-c" :style="{'background':checkPhoneNumber()?'':'#eee'}" style="margin-bottom: 80rpx;">
				<image class="phone-icon" src="@/static/login/code-icon.svg" mode=""></image>
				<input type="number" :disabled="(!checkPhoneNumber())" class="input-phone f-s-32 color-333 f-w-b" v-model="code" placeholder="请输入短信验证码" />
				<view class="code-btn color-2567F3 f-s-24" style="text-align: center;white-space: nowrap;text-align: center;" @click="getSmsCode">
					{{back_time >= 60?"获取验证码":back_time+'s'}}
				</view>
			</view>
			<view class="long-btn" @click="submitLogin">登录</view>
			<view class="bottom-text f-s-20 color-999 flex" style="bottom: 250upx;line-height:40upx">
				快捷登录: 
				<image 
					@click.stop="wxLogin"
					class="icon"
					style="height:40upx;width:40upx;margin-left:10upx"
					src="@/static/images/wx.svg" 
				/>
			</view>
			<view class="bottom-text f-s-24 color-999 flex a-i-c">
				登录即代表同意<view class="color-EE8300" style="text-decoration: underline;">
					用户协议
				</view>和<view class="color-EE8300" style="text-decoration: underline;">
					隐私政策
				</view>
			</view>
		</view>
	</public-view>
</template>

<script>
	// #ifdef APP
	const websocketModule = uni.requireNativePlugin("kyzone-websocket");
	// #endif
	import {goSwitch} from "@/nav.js"
	import config from "@/utils/config.js"
	// let app = getApp()
	export default {
		data() {
			return {
				phone:"",
				code:"",
				back_time:60,
				interval:"",
				timeout:"",
				is_post:""
			}
		},
		onLoad() {
			let user = uni.getStorageSync("userInfo") || ""
			if(user !== ""){
				// uni.showToast({
				// 	title:"已登录",
				// 	icon:"none"
				// })
				this.goSwitch({url:'/pages/index/index',current:1})
			}
		},
		onHide() {
			// this.$store.commit("changeLogin",1)
		},
		onUnload() {
			this.$store.commit("changeLogin",1)
		},
		methods: {
			goSwitch,
			async wxLogin() {
				try {
					const that = this;
					console.log('调用')
					const res = await uni.login({
						provider: 'weixin',
						onlyAuthorize: true
					});
					that.util.getRequest({
						url:"v1/auth/wxAuth",
						data: {
							code: res.code
						}
					}).then(res=>{
						console.log(res)
						uni.setStorageSync("userInfo",res.data.user_info)
						that.$store.commit("changeUserInfo",res.data.user_info)
						that.$store.commit("changeargs","")
						// that.setCid()
						that.getALL()
					})
				} catch (err) {
					console.log(err)
				}
			},
			checkPhoneNumber(){
				return Boolean(/^1[3-9]\d{9}$/.test(this.phone));
			},
			submitLogin(){
				let that = this
				if(that.phone === ''){
					uni.showToast({
						title:"请输入手机号",
						icon:"none"
					})
					return
				}
				if (!that.checkPhoneNumber()) {
					uni.showToast({
						title:"手机号码格式不正确",
						icon:"none"
					})
					return
				}
				if(that.code === ''){
					uni.showToast({
						title:"请输入验证码",
						icon:"none"
					})
					return
				}
				that.util.postRequest({
					url:"v1/auth/auth",
					data:{
						mobile:that.phone,
						code:that.code
					}
				}).then(res=>{
					console.log(res)
					uni.setStorageSync("userInfo",res.data.user_info)
					that.$store.commit("changeUserInfo",res.data.user_info)
					that.$store.commit("changeargs","")
					// that.setCid()
					that.getALL()
					// #ifdef APP
					websocketModule.connect({
						
					     url: `${config.wss_host}?token=${res.data.user_info.token}`,
					     reconnect: true, // 是否重连
					     headers:[]
					})
					// #endif
					
				}).catch(e=>{
					uni.showToast({
						title:e.msg,
						icon:"none"
					})
				})
			},
			setCid(){
				this.util.postRequest({
					url:"v1/user/buildCid",
					data:{
						cid:uni.getStorageSync("cid")
					}
				})
			},
			getSmsCode(){
				let that = this
				if(that.is_post !==""){
					uni.showToast({
						title:"操作频繁，请稍后重试",
						icon:"none"
					})
					return
				}
				if(that.phone === ''){
					uni.showToast({
						title:"请输入手机号",
						icon:"none"
					})
					return
				}
				if (!that.checkPhoneNumber()) {
					uni.showToast({
						title:"手机号码格式不正确",
						icon:"none"
					})
					return
				}
				that.is_post = '1'
				uni.showLoading({
					title:"发送中...",
					mask:true
				})
				that.util.postRequest({
					url:"v1/auth/sendSms",
					data:{
						mobile:that.phone
					}
				}).then(res=>{
					console.log(res)
					uni.hideLoading()
					uni.showToast({
						title:"发送成功"
					})
					that.backTime()
				}).catch(e=>{
					uni.hideLoading()
					that.is_post = ''
					uni.showToast({
						title:e.msg,
						icon:"none"
					})
				})
			},
			backTime(){
				let that = this
				if(that.interval){
					return
				}
				that.interval = setInterval(()=>{
					that.back_time--
					if(that.back_time<=0){
						clearInterval(that.interval)
						that.is_post = ''
						that.interval = ''
						that.back_time = 60
					}
				},1000)
			},
			getALL(){
				let that = this
				that.$getUser()
				that.util.getRequest({
					url:"v1/public_/getPayTypes",
				}).then(res=>{
					that.$store.commit("changePayTypeList",res.data)
				})
				that.goSwitch({url:"/pages/index/index"})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-text{
		position: fixed;
		bottom: 200upx;
	}
	.input-view{
		width: 686upx;
		padding: 26upx 38upx;
		border: 2upx solid #2567F3;
		border-radius: 20upx;
		box-shadow: 0px 12upx 24upx rgba(0, 0, 0, 0.13);
		margin-bottom: 40rpx;
		.code-btn{
			
		}
		.phone-icon{
			width: 36rpx;
			height: 36rpx;
			padding-right: 30rpx;
			border-right: 2rpx solid #ccd0d1;
			margin-right: 36rpx;
		}
		.input-phone{
			
		}
	}
	.input-bg1{
		background-color: #EEEEEE;
	}
	.login-logo{
		width: 192upx;
		height: 192upx;
		margin-bottom: 52upx;
	}
	.content{
		width: 750upx;
	}
</style>
